<template>
  <div style="display: flex;">
    <div style="margin-right: 20px;">
      <el-date-picker v-model="startDate" type="date" :placeholder="startPlaceholder" :disabledDate="startDisabledData" v-bind="$attrs.startOptions"/>
    </div>
    <div>
      <el-date-picker v-model="endDate" type="date" :placeholder="endPlaceholder" :disabled="endDateDisable" :disabledDate="endDisabledDate "
      v-bind="$attrs.endOptions"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

let props = defineProps({
  startPlaceholder: {
    type: String,
    default: '请选择开始日期'
  },
  endPlaceholder: {
    type: String,
    default: '请选择结束日期'
  },
  //是否禁用选择今天之前的日期
  diableToday: {
    type: Boolean,
    default: true
  }
})

let emits = defineEmits(['startChange','endChange'])
//开始日期
let startDate = ref<Date | null>(null)
//结束日期
let endDate = ref<Date | null>(null)
let endDateDisable = ref<Boolean>(true)

//禁用开始日期函数
let startDisabledData = (time: Date) => {
  if (props.diableToday) return time.getTime() < Date.now() - 1000*60*60*24
}
//禁用结束日期函数
let endDisabledDate = (time: Date) => {
  if (startDate.value) {
    return time.getTime() < startDate.value.getTime() + 1000*60*60*24
  }
}
watch(() => startDate.value, val => {
  if (!val) {
    endDate.value = null
    endDateDisable.value = true
  } else {
    emits('startChange',val)
    endDateDisable.value = false
  }
})

watch(() => endDate.value, val => {
  if (val) {
    emits('endChange', {
      startDate: startDate.value,
      endDate: val
    })
  }
})
</script>

<style scoped></style>